<template>
  <div id="back">
    <div id="picture">
    </div>
    <div id="passage">
      <div id="login">
        <br>
        <span>用户注册</span>
        <br>
        <form action="#">
            <el-input placeholder="用户名" prefix-icon="el-icon-user-solid" v-model="username"  @blur="checkLegalUsername"></el-input><span style="font-size: 7px;color: red">{{this.usernameAlertMessage}}</span>
            <el-input placeholder="邮箱" prefix-icon="el-icon-message" v-model="email" @blur="emailBlur" ></el-input><span style="font-size: 7px;color: red">{{this.emailAlertMessage}}</span>
            <el-input placeholder="验证码" prefix-icon="el-icon-search" v-model="userVerificationCode"></el-input>
            <el-button v-show="show" v-on:click="this.sendCode">发送验证码</el-button>
            <el-button v-show="!show" class="count">{{count}} s</el-button><span v-if="!emptyVerification&&!trueVerification" style="font-size: 7px;color: red">验证码错误</span>
            <el-input placeholder="请输入8-20位由数字及字母组成的密码" prefix-icon="el-icon-lock" v-model="password" @blur="checkLegalPassword" show-password></el-input><span v-if="!emptyPassword&&!legalPassword" style="font-size: 7px;color: red">密码格式有误</span>
            <el-input placeholder="确认密码" prefix-icon="el-icon-lock" v-model="confirmPassword" @blur="checkSamePassword" show-password></el-input><span v-if="!samePassword" style="font-size: 7px;color: red">前后密码不一致</span>
          <!-- <div style="text-align: left;margin-left: 15%">
            用户名：&emsp;<el-input type="text" placeholder="Username" required="" v-model="username" @blur="checkLegalUsername" style="width: 200px"></el-input><span style="font-size: 7px;color: red">{{usernameAlertMessage}}</span>
          </div> -->
          <!-- <br>
          <div style="text-align: left;margin-left: 15%">
            邮箱：&emsp;<el-input type="email" placeholder="Email" required="" v-model="email" @blur="emailBlur" style="width: 200px"></el-input><span style="font-size: 7px;color: red">{{emailAlertMessage}}</span>
          </div>
          <br>
          <div style="text-align: left;margin-left: 15%">
            密码：&emsp;<el-input type="password" placeholder="Password" required="" v-model="password" @blur="checkLegalPassword" style="width: 200px" show-password></el-input>
            <br><span v-if="emptyPassword" style="font-size: 7px">输入8-20位数字和字母，密码必须包含数字和字母</span><span v-if="!emptyPassword&&!legalPassword" style="font-size: 7px;color: red">密码格式有误</span>
          </div>
          <br>
          <div style="text-align: left;margin-left: 15%">
            确认密码:<el-input type="password" placeholder="Password" required="" v-model="password" @blur="checkLegalPassword" style="width: 185px" show-password></el-input> -->
            <!-- <span v-if="!empty_password&&!legal_password">密码格式有误</span> -->
          <!-- </div>
          <br>
          <div style="text-align: left;margin-left: 15%">
            验证码:&emsp;<el-input type="text" style="width: 150px" required="" v-model="userVerificationCode"></el-input>
            &emsp;
            <el-button v-show="show" v-on:click="this.sendCode">发送验证码</el-button>
            <el-button v-show="!show" class="count">{{count}} s</el-button>
            <span v-if="!emptyVerification&&!trueVerification" style="font-size: 7px;color: red">验证码错误</span>
          </div>
          <br> -->
          <button type="button" @click="this.submitInfo" class="bu" id="but"> 注册 </button>
        </form>
        <p class="account">已有账号，请<router-link to="/login">登录</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
import {checkSamePassword} from '../js/Password'
import {checkLegalPassword} from '../js/Password'
import * as verification from '../js/VerificationCode'

export default {
  name: "Signup",
  data() {
    return {
      emptyUn:true,
      show: true,
      count: '',
      timer: null,
      email: '',
      emptyEmail: true,
      isEmail: false,
      username: '',
      usernameAlertMessage:'',
      password:'',
      emptyPassword:true,
      legalPassword: true,
      verificationCode: '',//生成的验证码
      userVerificationCode:'',//用户输入的验证码
      emptyVerification:true,
      trueVerification:false,
      emailAlertMessage:"",
      samePassword:true,
      confirmPassword:'',
    }
  },
  methods:{
    getCode(){
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    emailBlur() {//检验邮箱格式
      var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if(this.email==''){
        this.emptyEmail=true;
        this.emailAlertMessage="邮箱格式有误";
      }
      else{
        this.emptyEmail=false;
      }
      if (!verify.test(this.email)) {
        this.isEmail = false;
        this.emailAlertMessage="邮箱格式有误";
      } else {
        this.isEmail = true;
        this.emailAlertMessage='';
      }
    },
    checkLegalUsername(){
      if(this.username==''){
        this.usernameAlertMessage="用户名不能为空";
        this.emptyUn=true;
      }
      else{
        this.emptyUn=false;
        this.usernameAlertMessage='';
      }
    },
    submitInfo() {
      if(this.userVerificationCode==''){
        this.emptyVerification=true;
      }
      else{
        this.emptyVerification=false;
      }
      if(!verification.checkVerificationCode(this.verificationCode,this.userVerificationCode)){
        this.trueVerification=false;
        console.log('wrong verification')
        return;
      }
      else{
        this.trueVerification=true;
        console.log('true verification');
      }
      if(!this.emptyVerification&&this.trueVerification){
          console.log('注册信息发送前');
        this.axios({
          method:"post",
          url:'/register',
          data:{
            email:this.email,
            password:this.password,
            user_name:this.username,
          },
        })
        .then(response=>{
          console.log(response);
          if(response.data.res==true){
            this.emailAlertMessage='';
            this.$alert('注册成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push('/login');
              }
            });
          }
          else{
            this.emailAlertMessage=response.data.message;
          }
        })
        .catch(error=>{
          console.log(error);
        })
      }
    },
    checkLegalPassword(){//检验密码格式
      if(this.password==''){
        this.emptyPassword=true;
      }
      else{
        this.emptyPassword=false;
      }
      this.legalPassword = checkLegalPassword(this.password);
    },
    checkSamePassword(){
        this.samePassword = checkSamePassword(this.password,this.confirmPassword);
    },
    sendCode(){//发送验证码
      this.verificationCode=verification.generate();
      console.log("已生成验证码");
      console.log(this.verificationCode);
      this.axios({
        method: "post",
        url:'/verify',
        data:{
          reason: '注册新用户',
          email: this.email,
          verify_code: this.verificationCode,
        },
      })
      .then(response=>{
        console.log(response);
        this.getCode();
      })
      .catch(error=>{
        console.log(error)
      })
    },
  }
}
</script>


<style scoped>
@import "../css/submit.css";
</style>